<script lang="ts">
	import { type NodeProps } from '@xyflow/svelte';
	import NodeWrap from '../base/NodeWrap.svelte';
	import { BookOpenText, PenLine } from 'lucide-svelte';
	import { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { roadmapStore } from '../../store.svelte';
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { StudyResourceData } from '$lib/api/proto/roadmap_data_type_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';

	const props: NodeProps = $props();

	const nodeContent = $derived(
		Any.unpack((props.data as unknown as NodeInfo).content!, StudyResourceData)
	);
</script>

<NodeWrap nodeProps={props} nodeName="学习资源">
	{#snippet nodeIcon()}
		<BookOpenText />
	{/snippet}
	{#snippet editIcon()}
		<button
			type="button"
			title="修改"
			class="btn btn-ghost btn-sm z-50"
			onclick={() => {
				roadmapStore.editNode = props.data as unknown as NodeInfo;
				roadmapStore.editNodeType = 'StudyResourceData';
			}}
		>
			<PenLine size={14} />
		</button>
	{/snippet}
	<div class="prose p-1">
		<h3>资源名称:{nodeContent.resourceName}</h3>
		<h3>资源说明</h3>
		<SimpleEditor sizeClass="" data={nodeContent.resourceDesc} readOnly />
		<div class="flex flex-wrap gap-2 items-center">
			<div class="font-bold text-xl">相关地址:</div>
			{#each nodeContent.resourceLinkList as resourceLink}
				<a target="_blank" href={resourceLink.url}>{resourceLink.name}</a>
			{/each}
		</div>
	</div>
</NodeWrap>
